<template>
	<view>
		<view style="position: relative;">
			<view style="position: absolute; top: 50px; left: 150px; z-index: 2;">
				<view style=" font-size: 40px; font-weight: bold; color: cornflowerblue;font-style: italic;">
					{{departmentData.departmentName}}专区
				</view>
				<view
					style="font-size: 15px;background-color: white; font-weight: bold;color:grey;border-radius: 5px;border: 1px solid grey;margin-top: 10px;"
					class="square-box">一站式解决{{departmentData.departmentName}}问题</view>
			</view>
			<image src="../../static/imgs/office.png" mode="wideFill" style="width: 100%; height: 200px;"></image>
		</view>
		<view style="padding: 20px;">
			<view style="display: flex;">
				<view style="font-size: 18px;font-weight: bold;">行内专家</view>
				<view style="margin-left: 15px;color: gray;margin-top: 4px;">高好评率</view>
				<view style="margin-left: 10px;color: gray;margin-top: 4px;">高接诊率</view>
				<view style="font-weight: bold;margin-left: 60px;margin-top: 4px;" @click="dialogToggle('error')">查看更多 ></view>
			</view>
			<scroll-view scroll-x="true" show-scrollbar="false"
				style="white-space: nowrap; width: 100%;margin-top: 10px;">
				<view style="display: flex;gap: 10px;">
					<view v-for="(office, index) in departmentData.officeList" :key="index">
						<button type="default" style="font-size: 14px;" size="mini" @click="changeOffice(office, index)"
							:class="{ 'is-active': selectedButtonIndex === index }">
							{{office.officeName}}
						</button>
					</view>
				</view>
			</scroll-view>
			<view class="box" style="margin-top: 10px;">
				<view style="display: flex;margin-top: 10px;" v-for="doctor in doctorData" :key="id">
					<view style="width: 70px;">
						<image :src="doctor.avatar"
							style="width: 70px;height: 70px; margin-left: 2px;border-radius: 50%;">
					</view>
					<view style="flex: 3;">
						<view style="display: flex;gap: 5px;margin-left: 8px;font-size: 14px;">
							<view style="font-size: 18px;font-weight: bold;">{{doctor.name}}</view>
							<view>{{doctor.staff}}</view>
							<view>{{doctor.officeName}}</view>
						</view>
						<view
							style="display: flex;gap: 10px;margin-left: 10px;font-size: 13px;color: gray;margin-top: 4px;">
							<view>{{doctor.hospitalName}}</view>
							<view class="square-box">{{doctor.level}}</view>
						</view>
						<view
							style="display: flex;gap: 10px;margin-left: 10px;font-size: 13px;color: gray;margin-top: 2px;">
							<view>接诊率 <strong style="color: orange;margin-left: 10px;">99%</strong></view>
							<view>问诊量 <strong style="color: orange;margin-left: 10px;">{{doctor.count}}</strong></view>
						</view>
					</view>
					<view style="flex: 1;">
						<button size="mini" type="primary" @click="goDoctoerDetail(doctor.id)"
							style="font-size: 14px;line-height: 20px;width: 48px;padding: 10px;margin-left: 10px;">查看详情</button>
					</view>
				</view>
			</view>
		</view>
		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="我知道了" title="通知" content="测试数据,暂无更多信息"
					@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				departmentId: "",
				officeId: '',
				officeData: {},
				departmentData: {},
				doctorData: {},
				labels: [{
						id: 1,
						name: '多系统萎缩'
					},
					{
						id: 2,
						name: '帕金森病'
					},
					{
						id: 3,
						name: '阿尔茨海默病'
					},
					{
						id: 4,
						name: '脑卒中'
					},
				],
				selectedButtonIndex: 0,
			}
		},
		onLoad(option) {
			this.departmentId = option.departmentId

		},
		onShow() {
			this.loadDepartment()
		},
		methods: {
			dialogToggle(type) {
				this.msgType = type
				this.$refs.alertDialog.open()
			},
			loadOfficeDoctor() {
				this.$request.get(`/doctor/selectByOfficeId/${this.officeId}`).then(res => {
					if (res.code === '200') {
						this.doctorData = res.data

					} else {
						this.$message.error(res.msg);
					}
				});
			},
			loadDepartment() {
				this.$request.get(`/department/selectById/${this.departmentId}`).then(res => {
					if (res.code === '200') {
						this.departmentData = res.data;
						this.officeId = res.data.officeList[0].officeId
						this.loadOfficeDoctor()
						this.selectedButtonIndex = 0
					} else {
						this.$message.error(res.msg);
					}
				})
			},
			loadOffice() {
				this.$request.get(`/office/selectById/${this.officeId}`).then(res => {
					if (res.code === '200') {
						this.departmentData = res.data;
					} else {
						this.$message.error(res.msg);
					}
				})
			},
			goDoctoerDetail(doctorId) {
				uni.navigateTo({
					url: '/pages/doctorDetail/doctorDetail?doctorId=' + doctorId
				})
			},
			changeOffice(office, index) {
				this.selectedButtonIndex = index
				this.officeId = office.officeId
				this.loadOfficeDoctor()
			},
			closetoggle2() {
				this.$refs.popup2.close()
			},
		}
	}
</script>

<style>
	.is-active {
		background-color: #ffaa00;
		/* 选中状态的背景颜色示例 */
		color: #FFF7F3;
		/* 文本颜色 */
		border-color: #FF5000;
		/* 边框颜色 */
	}
</style>